<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>data and methods</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        {{a}}
    </div>
    <script>
        //声明的数据对象
        var data = {
            a: 1
        };
        var vm = new Vue({
            el: '#app',
            //对象被加入到vue的实例中
            //data:Vm对象的属性；后data是用var定义的一个全新的变量
            data: data
        });
        //获得这个实例中的property，返回源数据中对应的字段
        //vm.a == data.a //=>true
        //改变var声明的data,视图重新渲染
        // data.a = "hi new a"

        //$watch是一个实例方法,
        //其中有两个重要的参数1.需要观察变化的变量
        //执行回调函数
        vm.$watch('a', function(newVal, oldVal) {
            console.log(newVal, oldVal)
        })

        //设置属性也会影响到元数据
        vm.a = "test";
        //data.a = vm.a;
        //反之亦然
        //data.a = 3;
        //vm.a

        //vue实例暴露的property与方法，通过使用$与用户定义的property区分开
        //vm.$data === data //=>true
        //console.log(vm.$data === data)


        //$watch是一个实例方法,
        //其中有两个重要的参数1.需要观察变化的变量
        //执行回调函数
        vm.$watch('a', function(newVal, oldVal) {
            console.log(newVal, oldVal)
        })
    </script>
</body>

</html>